<template>
    <div :class="{modal: app.loginFlag}">
        <div class="dialog-box side-card glass" v-show="app.loginFlag === true">
            <n-input class="input mt-10" v-model:value="loginForm.username" placeholder="邮箱号"
                     @keyup.enter="handleLogin" clearable></n-input>
            <n-input class="input mt-10" v-model:value="loginForm.password" type="password"
                     show-password-on="click" placeholder="密码"
                     @keyup.enter="handleLogin"></n-input>
            <n-button class="comm-submit mt-10" color="#CC57F3" :loading="loading" @click="handleLogin" :round="true">
                <span class="edge"></span>
                <div class="front">上 号</div>
            </n-button>
            <div class="login-tip mt-10">
                <button class="colorFlag" @click="handleRegister">安！还没得账号！</button>
                <button class="colorFlag" @click="handleForget">遭求，搞忘了啊?</button>
            </div>
            <div class="card flex-center">
                <span class="tx">老子懒得登录</span>
                <svg-icon class="icon" icon-class="qq" size="0.5rem"></svg-icon>
                <svg-icon class="icon" icon-class="gitee" size="0.5rem" v-if="showLogin('gitee')"
                          @click="giteeLogin"></svg-icon>
                <svg-icon class="icon" icon-class="github" size="0.5rem" v-if="showLogin('github')"
                          @click="githubLogin"></svg-icon>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {login} from "@/api/login";
import {LoginForm} from "@/api/login/types";
import config from "@/assets/js/config";
import useStore from "@/store";
import {setToken} from "@/utils/token";
import {useWindowSize} from "@vueuse/core";

const {app, user, web} = useStore();
const route = useRoute();
const loading = ref(false);
const loginForm = ref<LoginForm>({
    username: "",
    password: "",
});

const {width, height} = useWindowSize();

watchEffect(() => {
    // 监听屏幕高度，对话框收回
    let remHeiGht = height.value / 37.5;
    if (remHeiGht < 10 && app.loginFlag) {
        app.setLoginFlag(false);
    }
});

const showLogin = computed(
    () => (type: string) => ["gitee", "github"].includes(type)
);
const handleRegister = () => {
    app.setLoginFlag(false);
    app.setRegisterFlag(true);
};
const handleForget = () => {
    app.setLoginFlag(false);
    app.setForgetFlag(true);
};
const giteeLogin = () => {
    //保留当前路径
    user.savePath(route.path);
    app.setLoginFlag(false);
    window.open(
        "https://gitee.com/oauth/authorize?client_id=" +
        config.GITEE_APP_ID +
        "&response_type=code&redirect_uri=" +
        config.GITEE_REDIRECT_URI,
        "_self"
    );
};
const githubLogin = () => {
    //保留当前路径
    user.savePath(route.path);
    app.setLoginFlag(false);
    window.open(
        "https://github.com/login/oauth/authorize?client_id=" +
        config.GITHUB_APP_ID +
        "&redirect_uri=" +
        config.GITHUB_REDIRECT_URL +
        "&scope=user",
        "_self"
    );
};
const handleLogin = () => {
    let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    if (!reg.test(loginForm.value.username)) {
        window.$message?.warning("邮箱格式不正确");
        return;
    }
    if (loginForm.value.password.trim().length == 0) {
        window.$message?.warning("密码不能为空");
        return;
    }
    loading.value = true;
    login(loginForm.value).then(({data}) => {
        if (data.flag) {
            setToken(data.data);
            user.GetUserInfo();
            window.$message?.success("登录成功");
            loginForm.value = {
                username: "",
                password: "",
            };
            app.setLoginFlag(false);
        }
        loading.value = false;
    });
};
</script>

<style scoped>

.login-tip {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .colorFlag {
        font-size: 1.2em;
    }
}

.card {
    position: relative;
    background: var(--main-2);
    box-shadow: 0 0 0.04rem 0.02rem var(--box-shadow);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    margin: 0.3rem auto 0;
    height: 0.7rem;
    width: 5rem;
    border-radius: 0.25rem;
    padding: 0.1rem 0;

    &::before, &::after {
        position: absolute;
        display: flex;
        align-items: center;
        width: 50%;
        height: 100%;
        transition: 0.25s linear;
        z-index: 1;
    }

    &::before {
        content: "";
        left: 0;
        justify-content: flex-end;
        background-color: var(--main-1);
    }

    &::after {
        content: "";
        right: 0;
        justify-content: flex-start;
        background-color: var(--main-1-h4);
    }

    &:hover {
        box-shadow: 0 0 0.06rem 0.03rem var(--box-shadow-c);
    }

    &:hover span {
        opacity: 0;
        z-index: -3;
    }

    &:hover::before {
        opacity: 0.5;
        transform: translateY(-100%);
    }

    &:hover::after {
        opacity: 0.5;
        transform: translateY(100%);
    }

    .tx {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: var(--text-color);
        font-family: 'Fira Mono', monospace;
        font-size: 0.5rem;
        font-weight: bold;
        opacity: 1;
        transition: opacity 0.25s;
        z-index: 2;
    }

    .icon {
        transition: 0.25s;
        margin: 0 0.3rem;
        border-radius: 50%;

        &:hover {
            background-color: var(--main-1);
            animation: bounce_613 0.4s linear;
        }
    }
}
</style>
